<template>
  <div class="orderBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/mamger' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/users' }">订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row type="flex">
        <el-col :span="8">
          <div class="grid-content bg-purple title" style="text-align: left">
            <el-input clearable placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>

      <el-table :data="orderlist" border style="width: 100%">
        <el-table-column type="index" label="#" width="50"></el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="200">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="120">
        </el-table-column>
        <el-table-column prop="pay_status" label="是否付款" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="success" v-if="scope.row.pay_status == '1'">已付款</el-button>
            <el-button size="mini" type="danger" v-else>未付款</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="120">
        </el-table-column>
        <el-table-column prop="create_time" label="下单时间">
          <template slot-scope="scope">
            {{ scope.row.create_time | formDate }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="修改地址" placement="top">
              <el-button icon="el-icon-edit" type="primary" @click="handleEditAddress(scope.$index, scope.row)"></el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="物流信息" placement="top">
              <el-button icon="el-icon-location" type="danger" @click="handleEditPostMan(scope.$index, scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--  分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="orderParams.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="orderParams.pagesize"
      layout="total, sizes, prev, pager, next, jumper" :total="totalpage">
    </el-pagination>

    <!--  弹框修改地址 -->

    <el-dialog title="收货地址" :visible.sync="addressDialog">
      <el-form :model="addressForm" :rules="rules">
        <el-form-item label="省市区/县" prop="address1" :label-width="formLabelWidth">
          <!-- <el-input v-model="addressForm.address1" autocomplete="off"></el-input> -->

          <el-cascader v-model="addressForm.address1" :options="cityData" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
        </el-form-item>

        <el-form-item label="详细地址" prop="address2" :label-width="formLabelWidth">
          <el-input v-model="addressForm.address2" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDecidedAddress">取 消</el-button>
        <el-button type="primary" @click="decidedAddress">确 定</el-button>
      </div>
      <!-- addressDialog = false -->
    </el-dialog>

    <!--  物流信息 -->
    <el-dialog title="物流进度" :visible.sync="postManDialog">
      <el-timeline>
        <el-timeline-item v-for="(activity, index) in postManList" :key="index" :timestamp="activity.ftime" :icon="activity.icon" :type="activity.type" :color="activity.color">
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelPostManDialog">取 消</el-button>
        <el-button type="primary" @click="decidedPostManDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formDateTime } from '../../utils/index'
import { getOrders, getPostMan } from '../../api/index.js'
import cityData from './citydata'
export default {
  name: '', // keep-alive 使用的
  data() {
    return {
      orderlist: [],
      orderParams: {
        query: '',
        pagenum: 1,
        pagesize: 10,
      },
      totalpage: 0,
      addressDialog: false,
      addressForm: {
        address1: '',
        address2: '',
      },
      formLabelWidth: '100px',
      rules: {
        address1: [
          { required: true, message: '请输入省市区', trigger: 'blur' },
        ],
        address2: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
        ],
      },
      // cityData:cityData
      cityData,

      postManDialog: false,
      postManList: [], // 初始化物流信息
    }
  },
  created() {
    this.initOrderList()

    this.getColor()
  },

  methods: {
    async initOrderList() {
      let {
        data: { goods, pagenum, total },
        meta: { status },
      } = await getOrders(this.orderParams)
      if (status != 200) return this.$message.error('请求失败')
      this.orderlist = goods
      this.orderParams.pagenum = pagenum * 1
      this.totalpage = total
    },

    //分页功能
    handleSizeChange(val) {
      this.orderParams.pagesize = val
      this.initOrderList()
    },
    handleCurrentChange(val) {
      this.orderParams.pagenum = val
      this.initOrderList()
    },
    //修改地址
    handleEditAddress(i, scope) {
      this.addressDialog = true
    },
    //三级联动获取选择后的值
    handleChange(value) {
      console.log(value)
    },

    // 真正的更改地址
    decidedAddress() {
      this.addressDialog = false
    },
    cancelDecidedAddress() {
      this.addressDialog = false
      this.addressForm = {}
    },

    getColor() {
      var arr = [
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
      ]
      var str = '#'
      for (var i = 0; i < 6; i++) {
        function getRandom(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min
        }
        var re = arr[getRandom(0, arr.length - 1)]
        str += re
      }
      console.log(str.toLowerCase())
      return str.toLowerCase()
    },

    //物流信息
    async handleEditPostMan() {
      this.postManDialog = true
      let {
        data,
        meta: { status },
      } = await getPostMan({ id: 1106975712662 })
      // data  没有 color  字段
      if (status != 200) return this.$message.error('请求失败')
      // 进行数据处理
      // var colorTypeArr = [];

      for (var i = 0; i < data.length; i++) {
        let newStr = this.getColor()
        let obj = { type: 'primary', icon: 'el-icon-more', color: newStr }

        // if (i % 2 == 0) {
        //   obj.type = "success";
        // } else {
        //   obj.type = "primary";
        // }
        i % 2 == 0 ? (obj.type = 'success') : (obj.type = 'primary')

        data[i] = { ...data[i], ...obj }
      }
      // console.log(data);

      this.postManList = data
    },

    cancelPostManDialog() {
      this.postManDialog = false
    },
    decidedPostManDialog() {
      this.postManDialog = false
    },
  },


 
}
</script>

<style scoped lang="css">
.el-card {
  width: 1200px;
}
.orderBox {
  padding-left: 20px;
}

.el-cascader {
  width: 100%;
}
</style>
